<template>
	<div class="main-content">
		<div class="row">
			<div class="col-sm-4 col-md-3">
				<ul class="template-title-fl">
					<li><button type="button" class="btn btn-default btn-theme addBtn" v-show="loginInfo.accountType == 0" v-on:click="openLableModal('A')" v-res="{code:'menu_0004_0003_0001'}">新增</button></li>
					<li><button type="button" class="btn btn-default btn-theme" v-show="loginInfo.accountType == 0" v-on:click="openLableModal('U')" v-res="{code:'menu_0004_0003_0002'}">修改</button></li>
					<li><button type="button" class="btn btn-default btn-theme" v-show="loginInfo.accountType == 0" v-on:click="delPremisesLable" v-res="{code:'menu_0004_0003_0003'}">删除</button></li>
				</ul>
				<div class="table-filter">
					<ul id="premisesTree" class="ztree"></ul>
				</div>
			</div>
			<div class="col-sm-8 col-md-9">
				<form id="searchForm">
					<ul class="template-title-fls">
						<li><input type="text" v-model="codeName" name="codeValueName" class="form-control-sm" placeholder="请输入标签名" /></li>
                        <li><button type="button" class="btn btn-default btn-theme" v-on:click="loadLableName()">查询</button></li>
						<li><button type="button" class="btn btnefault btn-theme addBtn2" v-show="loginInfo.accountType == 0" v-on:click="openLableNameModal('A', '')" v-res="{code:'menu_0004_0003_0004'}">新增</button></li>
						
					</ul>
				</form>
				<div class="table-responsive">
					<table class="table table-striped table-bordered min-width-790">
						<thead>
							<tr>
								<th width="7%">序号</th>
								<th width="28%">标签名</th>
								<th width="28%">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(row, index) in rows">
								<td>{{index + 1}}</td>
								<td>{{row.codeName}}</td>
								<td>
									<button type="button" class="btnA edit" v-on:click="openLableNameModal('U', row)" v-res="{code:'menu_0004_0003_0005'}">编辑</button>
									<button type="button" class="btnA delete-btn" v-on:click="delLableName(row.id)" v-res="{code:'menu_0004_0003_0006'}">删除</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div id="laypage_premises_label"></div>
			</div>
		</div>
		<addPremisesLableModal v-bind:addLableModal="lableInfo" v-on:getPremisesLableListener='getPremisesLableReturn'></addPremisesLableModal>
		<addLableNameModal v-bind:addLableNameModal="lableNameInfo" v-on:getLableNameListener='getLableNameReturn'></addLableNameModal>
	</div>
</template>

<script>
	import addPremisesLableModal from './addPremisesLable.vue'
	import addLableNameModal from './addLableName.vue'
	import ztreeCore from '../../assets/js/zTree/jquery.ztree.core-3.5.min.js'
	export default {
		data() {
				return {
					loginInfo: {
						userId: window.localStorage.getItem("1_userId"),
						isLogin: window.localStorage.getItem("1_isLogin"),
						accountType: window.localStorage.getItem("1_accountType")
					},
					premisesTreeData: [],
					rows: [],
					pageInfo: {
						pageNo: 1,
						pageSize: 10
					},
					codeName:'',
					lableInfo: {
						lableId: '',
						optType: '',
						typeName: '',
						remark: ''
					},
					lableNameInfo: {
						typeId: '',
						optType: '',
						codeName: '',
						remark: ''
					}
				}
			},
			components: {
				addPremisesLableModal,
				addLableNameModal
			},
			mounted: function() {
				this.loadPremisesTreeData();
			},
			methods: {
				loadPremisesTreeData: function() {
					var _self = this;
					//ztree基础属性设置
					var setting = {
						data: {
							simpleData: {
								enable: true
							}
						},
						callback: {
							onClick: _self.zreeOnClick
						}
					};
					var body = {};
					body.params = {};
					var url = _self.utilHelper.apiUrl + "/api/getBaseCodeTypeTree";
					_self.$http.post(url, body).then((response) => {
						var resData = response.body.resData;
						if(resData.result == "1"){
							var nodesList = resData.nodesList;
							var result = resData.result;
							$.fn.zTree.init($("#premisesTree"), setting, nodesList);
							//楼盘标签树加载成功后,加载楼盘数据
							_self.loadLableName();
						}
					}, (response) => {
						console.log("获取楼盘标签树失败");
					});
				},
				zreeOnClick: function(event, treeId, treeNode) {
					this.loadLableName();
				},
				//打开新增/修改弹窗
				openLableModal(optType) {
					//获取选中的树节点
					var treeObj = $.fn.zTree.getZTreeObj("premisesTree");
					//获取全部节点
					var allNodes = treeObj.getNodes();
					//获取选中节点
					var nodes = treeObj.getSelectedNodes();
					if(allNodes.length > 0 && nodes.length > 0) {
						//得到第一个选中的节点
						var selNode = nodes[0];
						//将节点信息及操作按钮的点击事件类型向下传递给子组件
						this.lableInfo.lableId = selNode.id;
						this.lableInfo.optType = optType;
						this.lableInfo.typeName = selNode.name;
						this.lableInfo.remark = selNode.other;
						$('#addPremisesLableModal').modal('show');
					} else {
						if(nodes.length == 0 && optType == "A") {
							//未选择任何上级标签时新增
							this.lableInfo.lableId = 0;
							this.lableInfo.optType = optType;
							$('#addPremisesLableModal').modal('show');
						} else {
							layer.msg('请选择一个楼盘标签 ', {
								time: 2000
							});
						}
					}
				},
				//新增/修改窗口回调
				getPremisesLableReturn() {
					this.loadPremisesTreeData();
				},
				//删除标签组
				delPremisesLable() {
					var _self = this;
					var treeObj = $.fn.zTree.getZTreeObj("premisesTree");
					var nodes = treeObj.getSelectedNodes();
					if(nodes.length <= 0) {
						layer.msg('请选择一个要删除的标签组', {
							time: 2000
						});
						return false;
					}
					//得到第一个选中的节点（此处位单节点选中，因此直接获取即可）
					var selNode = nodes[0];
					var params = {};
					params["id"] = selNode.id;
					layer.confirm('您是否要删除该标签组？', {
						skin: 'layui-layer-DarkOrange', //样式类名
						btn: ['确定删除', '再考虑考虑'] //按钮
					}, function() {
						var body = {};
						body.params = params;
						var url = _self.utilHelper.apiUrl + "/api/delBaseCodeType";
						_self.$http.post(url, body).then((response) => {
							var resData = response.body.resData;
							var result = resData.result;
							var resultMsg = resData.resultMsg;
							//输出操作信息
							layer.msg(resultMsg, {
								time: 1000
							}, function() {
								if("1" == result) {
									_self.loadPremisesTreeData();
								}
							});
						}, (response) => {

						});
					}, function() {});
				},
				//查询标签名称
				loadLableName: function(obj) {
					//根据机构信息，获取用户
					var _self = this;
					var params = {};
					if(!obj){
						 _self.pageInfo.pageNo = 1;
						 _self.pageInfo.pageSize = 10;
					}
					params["pageNo"] = _self.pageInfo.pageNo;
					params["pageSize"] = _self.pageInfo.pageSize;
					params["codeName"] = _self.codeName;
					var treeObj = $.fn.zTree.getZTreeObj("premisesTree");
					if(treeObj) {
						var nodes = treeObj.getSelectedNodes();
						if(nodes.length > 0) {
							params["typeId"] = nodes[0].id;
						}
					}
					var body = {};
					body.params = params;
					var url = this.utilHelper.apiUrl + "/api/getBaseCodeValuePage";
					this.$http.post(url, body).then((response) => {
						var resData = response.body.resData;
						if(resData.result != "1"){
							return false;
						}
						var data = resData.baseCodeValuePage;
						var total = data.total;
						var totalPages = data.totalPages;
						_self.rows = data.rows;
						//加载分页组件
						if(totalPages > 0) {
							layui.laypage.render({
	                            elem: 'laypage_premises_label', //容器。值支持id名、原生dom对象，jquery对象,
	                            pages: totalPages, //总页数
	                            limit: _self.pageInfo.pageSize,
	                            curr: _self.pageInfo.pageNo,
	                            count: total,
	                            theme: '#f87242;', //皮肤
								first: '首页', //若不显示，设置false即可
								last: '尾页', //若不显示，设置false即可
								prev: '上一页', //若不显示，设置false即可
								next: '下一页', //若不显示，设置false即可
								layout:['prev', 'page', 'next','skip','count'],
	                            jump: function(obj,first){
	                                if(!first) {
	                                    _self.pageInfo.pageNo = obj.curr;
	                                    _self.loadLableName(true);
	                                }
	                            }
	                        });
						}
					}, (response) => {
						console.log("标签名称查询失败");
					});
				},
				//新增/修改标签名称
				openLableNameModal(optType, obj) {
					this.lableNameInfo.optType = optType;
					if("A" == optType) {
						//获取选中的树节点
						var treeObj = $.fn.zTree.getZTreeObj("premisesTree");
						var allNodes = treeObj.getNodes();
						var nodes = treeObj.getSelectedNodes();
						//得到第一个选中的节点
						var selNode = nodes[0];
						if(nodes.length <= 0) {
							layer.msg('请选择一个楼盘标签', {
								time: 2000
							});
							return false;
						}
						//弹出新增窗口
						this.lableNameInfo.typeId = selNode.id;
						$('#addLableNameModal').modal('show');
					} else if("U" == optType) {
						this.lableNameInfo.id = obj.id;
						this.lableNameInfo.typeId = obj.typeId;
						this.lableNameInfo.codeName = obj.codeName;
						this.lableNameInfo.remark = obj.remark;
						$('#addLableNameModal').modal('show');
					}
				},
				getLableNameReturn() {
					this.loadLableName(true);
				},
				//删除标签名称
				delLableName(id){
					var _self = this;
					layer.confirm("您是否要删除该标签名称？", {
						skin: 'layui-layer-DarkOrange', //样式类名
						btn: ['确定删除', '再考虑考虑'] //按钮
					}, function() {
						var params = {id: id};
						var body = {};
						body.params = params;
						var url = _self.utilHelper.apiUrl + "/api/delBaseCodeValue";
						_self.$http.post(url, body).then((response) => {
							var resData = response.body.resData;
							var result = resData.result;
							var resultMsg = resData.resultMsg;
							//输出操作信息
							layer.msg(resultMsg, {
								time: 2000
							}, function() {
								if("1" == result) {
									_self.loadLableName(true);
								}
							});
						}, (response) => {

						});
					}, function() {});
				}
			}
	}
</script>